<script setup lang="ts">
  import { ref } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import InnerPage from '@/components/inner-page/index.vue';
  import { queryTraineeList } from '@/api/reemployment-management/trainee';
  import { getGenderName } from '@/views/lhj-v1/util';
  import ItemAdd from './add.vue';
  import ItemInfo from './info.vue';

  const baseNameMap = {
    itemId: { key: 'id', label: '学员ID' },
    itemName: { key: 'name', label: '学员姓名' },
    itemGender: { key: 'gender', label: '学员性别' },
    itemGenderName: { key: 'genderName', label: '学员性别' },
    itemAge: { key: 'age', label: '学员年龄' },
    itemPhone: { key: 'phoneNumber', label: '联系电话' },
    itemHousehold: { key: 'householdTown', label: '户口所在地/街道' },
    btnActionTitle: { label: '操作' },
    btnAction: { label: '查看' },
  };

  const dataPage = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });

  // 查询表格列配置
  const tableColumns = [
    {
      title: baseNameMap.itemId.label,
      dataIndex: baseNameMap.itemId.key,
      // width: 200,
    },
    {
      title: baseNameMap.itemName.label,
      dataIndex: baseNameMap.itemName.key,
      // width: 200,
    },
    {
      title: baseNameMap.itemGenderName.label,
      dataIndex: baseNameMap.itemGenderName.key,
      // width: 200,
    },
    {
      title: baseNameMap.itemAge.label,
      dataIndex: baseNameMap.itemAge.key,
      // width: 200,
    },
    {
      title: baseNameMap.itemPhone.label,
      dataIndex: baseNameMap.itemPhone.key,
      // width: 240,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemHousehold.label,
      dataIndex: baseNameMap.itemHousehold.key,
      // width: 200,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.btnActionTitle.label,
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 100,
    },
  ];

  const pageTable = usePageTable({
    resetBtn: false,
    searchForm: {
      state: {
        [baseNameMap.itemName.key]: '',
      },
    },
    table: {
      rowKey: baseNameMap.itemId.key,
      fakePage: true,
      apiFun: async (query) => {
        return new Promise((resolve) => {
          const params = {
            ...dataPage.value,
            name: query[baseNameMap.itemName.key],
          };
          queryTraineeList(params)
            .then((res) => {
              dataPage.value.total = res.total;
              const list = res.list as any;
              list.map((item: any) => {
                if (!item[baseNameMap.itemGenderName.key]) {
                  item[baseNameMap.itemGenderName.key] = getGenderName(
                    item[baseNameMap.itemGender.key]
                  );
                }
                return item;
              });
              resolve(list);
            })
            .catch((err) => {});
        });
      },
      onSuccess(data) {
        // dataDepartments.value = getDepartmentList(data);
      },
      columns: tableColumns,
    },
  });

  const addHandler = ref({
    visible: false,
    props: {
      [baseNameMap.itemId.key]: '',
    },
    show: (id: string) => {
      addHandler.value.props[baseNameMap.itemId.key] = id;
      addHandler.value.visible = true;
    },
    onBack: () => {
      addHandler.value.visible = false;
    },
    onUpdate: () => {
      addHandler.value.visible = false;
      pageTable.reload();
    },
  });

  const infoHandler = ref({
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      infoHandler.value.props[baseNameMap.itemId.key] = '';
      pageTable.reload();
    },
    onEdit: (id: string) => {
      console.log('id:', id);
      addHandler.value.show(id);
      infoHandler.value.props[baseNameMap.itemId.key] = '';
    },
    onUpdate: () => {
      infoHandler.value.props[baseNameMap.itemId.key] = '';
      pageTable.reload();
    },
  });
</script>

<template>
  <div class="m-trainee">
    <div v-show="!infoHandler.props.data" class="m-trainee-raw">
      <TableLayout v-bind="pageTable.bindProps" @create="addHandler.show('')">
        <template #searchForm="{ state }">
          <!-- 学员姓名 -->
          <a-form-item
            :field="baseNameMap.itemName.key"
            :label="baseNameMap.itemName.label"
          >
            <a-input
              v-model="state[baseNameMap.itemName.key]"
              :placeholder="'请输入' + baseNameMap.itemName.label"
              allow-clear
            />
          </a-form-item>
          <!-- 户口所在地 -->
          <!-- <a-form-item :field="baseNameMap.itemHousehold.key" :label="baseNameMap.itemHousehold.label">
            <a-input
              v-model="state[baseNameMap.itemHousehold.key]"
              :placeholder="'请输入'+baseNameMap.itemHousehold.label"
              allow-clear
            />
          </a-form-item> -->
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button
              size="small"
              type="text"
              @click="
                infoHandler.props[baseNameMap.itemId.key] =
                  record[baseNameMap.itemId.key]
              "
              >{{ baseNameMap.btnAction.label }}</a-button
            >
          </a-space>
        </template>
      </TableLayout>
    </div>
    <!-- <Transition name="slide-right"> -->
      <InnerPage
        v-if="addHandler.visible"
        style="z-index: 1000"
        class="m-trainee-add"
        @back="addHandler.onBack"
      >
        <!-- 新增 -->
        <ItemAdd v-bind="addHandler.props" @update="addHandler.onUpdate" />
      </InnerPage>
    <!-- </Transition> -->
    <!-- <Transition name="slide-right"> -->
    <InnerPage
      v-if="infoHandler.props[baseNameMap.itemId.key]"
      class="m-trainee-info"
      @back="infoHandler.onBack"
    >
      <!-- 详情 -->
      <ItemInfo
        v-bind="infoHandler.props"
        @edit="infoHandler.onEdit"
        @update="infoHandler.onUpdate"
      />
    </InnerPage>
    <!-- </Transition> -->
  </div>
</template>

<style lang="less" scoped>
  .m-trainee {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
